<template>
  <div class="film-item">
    <router-link :to="{name:'Film-details', params: {filmId: filmobj.filmId} }">
      <van-card
        class="goods-card van-image__img"
        :style="{textAlign: 'left', width: 'auto'}"
      >
      <div slot="title">
        <p class="van-ellipsis"
        :style="{color: '#191a1b',
        'font-size': '.3rem',
        'height': '.5rem',
        'line-height': '.5rem'}">
          {{filmobj.name}}
        </p>
      </div>
      <div slot="desc">
        <p :style="{color: '#797d82'}">
          <span v-if="type==='now'">观众评分 <span :style="{color: '#ffb232'}">{{filmobj.grade}}</span></span>
          <br/>
        </p>
      </div>
      <div slot="tags" :style="{color: '#797d82'}">
        <p class="van-ellipsis">主演: {{allactors}}</p>
        <p v-if="type==='now'">{{filmobj.nation+' | '+filmobj.runtime}}分钟</p>
        <p v-if="type==='soon'">上映日期: {{soondate}}</p>
      </div>
      <div slot="thumb">
        <van-image
          fit="contain"
          height="90"
          radius="8"
          :src="filmobj.poster"
        />
      </div>
      </van-card>
    </router-link>
  </div>
</template>

<script>
import Vue from 'vue'
import { Card, Image } from 'vant'
Vue.use(Card).use(Image)

export default {
  props: ['filmobj', 'type'],
  computed: {
    allactors () {
      return this.filmobj.actors.map(item => item.name).join(' ')
    },
    soondate () {
      const week = ['日', '一', '二', '三', '四', '五', '六']
      const soon = new Date(this.filmobj.premiereAt * 1000)
      return '周' + week[soon.getDay()] + ' ' + (soon.getMonth() * 1 + 1) + '月' + soon.getDate() + '日'
    }
  }
}
</script>
